<template>
  <view>
    <heardData></heardData>
    <view class="content" v-if="!visible">
      <view>
        <uni-forms ref="baseForm" :modelValue="baseFormData">
          <uni-forms-item>
            <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput v-model="baseFormData.tel" placeholder="请输入手机号" />
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput v-model="baseFormData.orderNum" placeholder="请输入订单号" />
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput v-model="baseFormData.age" placeholder="请输入商品名称" />
          </uni-forms-item>
          <view class="button-group">
            <button type="primary" size="mini" @click="search"><uni-icons type="search" color='#fff'
                size="15"></uni-icons>查询</button>
            <button type="warn" size="mini" @click="add"><uni-icons type="plusempty" color='#fff'
                size="15"></uni-icons>新增</button>
          </view>
        </uni-forms>
      </view>
      <view class="table">
        <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
          <uni-tr>
            <uni-th align="center">订单号</uni-th>
            <uni-th align="center">手机号码</uni-th>
            <uni-th align="center">是否支付</uni-th>
            <uni-th align="center">付款方式</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tableData" :key="index">
            <uni-td>{{ item.ddbh }}</uni-td>
            <uni-td>
              <view class="name">{{ item.khsj }}</view>
            </uni-td>
            <uni-td align="center">{{ item.ddzfztwz }}</uni-td>
            <uni-td>{{item.fkfswz}}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <div class="dialog" v-if="visible">
      <view class="dialogform">
        <div class="btns">
          <button type="primary" size="mini" @click="submit('dialogform')">保存</button>
          <button type="default" size="mini" @click="close">返回</button>
        </div>
        <uni-forms ref="dialogform" :modelValue="dialogformData" :rules="rules">
          <uni-forms-item label="客户名称" name="khmc">
            <uni-easyinput v-model="dialogformData.khmc" suffixIcon="person" placeholder="请输入客户名称" />
          </uni-forms-item>
          <uni-forms-item label="手机号" name="khsj">
            <uni-easyinput v-model="dialogformData.khsj" suffixIcon="phone" placeholder="请输入手机号" />
          </uni-forms-item>
          <uni-forms-item label="邮寄地址">
				<uni-easyinput v-model="dialogformData.khdz" suffixIcon="location" placeholder="请输入邮寄地址" />
			</uni-forms-item>
			<uni-forms-item label="付款方式">
				<uni-data-select v-model="dialogformData.fkfs" placeholder="请选择付款方式" :localdata="fkfsData"></uni-data-select>
			</uni-forms-item>
          <view>
          </view>
          <view class="btns2">
            <button type="primary" size="mini" @click="addgoods"><uni-icons type="plusempty" color='#fff'
                size="15"></uni-icons>新增商品</button>
          </view>
          <view class="goods-table">
            <view class="heard">
              <text>商品名称</text>
              <text>商品图片</text>
              <text>购买数量</text>
              <text>邮寄地址</text>
            </view>
            <view v-if="dialogformData.lstTbYOrderproduct.length !== 0">
              <uni-swipe-action-item v-for="(item, index) in dialogformData.lstTbYOrderproduct">
                <view class="table-content" :key="index">
                  <view>{{ item.cpmc }}</view>
                  <view>
                    <image style="width: 100%; max-height: 150rpx;" :src="item.cptpdz1" mode=""></image>
                  </view>
                  <view>{{ item.gmsl }}</view>
                  <view>{{item.yjdz}}</view>
                </view>
                <template v-slot:right>
                  <view class="primary-btn" @click="editPro(item)"><text>编辑</text></view>
                  <view class="error-btn" @click="delPro(index)"><text>删除</text></view>
                </template>
              </uni-swipe-action-item>
            </view>
            <view v-else>
              <kevy-empty :show="true" type="favor" text="没有数据哦~"></kevy-empty>
            </view>
          </view>
          <uni-forms-item label="支付金额">
            <uni-easyinput v-model="dialogformData.yfdj" placeholder="支付金额" />
          </uni-forms-item>
          <uni-forms-item label="支付凭证">
            <div class="certificate">
            <uni-easyinput v-model="dialogformData.dddjpz" placeholder="支付凭证" />
            <button type="default" size="mini" @click="upload">上传凭证图片</button>
            <div class="preview" v-if="dialogformData.dddjtpdzbase64">
              <image :src="dialogformData.dddjtpdzbase64"></image>
            </div>
            </div>
          </uni-forms-item>
          <uni-forms-item label="经办人">
            <uni-easyinput v-model="dialogformData.ddjbr" placeholder="经办人" />
          </uni-forms-item>
          <!-- <uni-forms-item label="订单类型">
            <uni-easyinput v-model="dialogformData.age" placeholder="订单类型" />
          </uni-forms-item> -->
          <uni-forms-item label="订单渠道">
            <uni-data-select v-model="dataForm.ddqd" placeholder="订单渠道" :localdata="ddqdList"></uni-data-select>
          </uni-forms-item>
          <!-- <uni-forms-item label="订单日期">
            <uni-easyinput v-model="dialogformData.age" placeholder="订单日期" />
          </uni-forms-item> -->
          <uni-forms-item label="订单余额">
            <uni-easyinput v-model="dialogformData.ddwkje" placeholder="订单余额" />
          </uni-forms-item>
          <uni-forms-item label="尾款凭证">
<div class="certificate">
            <uni-easyinput v-model="dialogformData.ddwkpz" placeholder="尾款凭证" />
            <button type="default" size="mini" @click="upload">上传凭证图片</button>
            <div class="preview" v-if="dialogformData.ddwktpdzbase64">
              <image :src="dialogformData.ddwktpdzbase64"></image>
            </div>
            </div>
          </uni-forms-item>
          <uni-forms-item label="尾款日期">
            <uni-easyinput v-model="dialogformData.ddwkzfrq" placeholder="尾款日期" />
          </uni-forms-item>
          <uni-forms-item label="产品号段">
            <uni-easyinput v-model="dialogformData.ddzfztwz" placeholder="产品号段" />
          </uni-forms-item>
        </uni-forms>
      </view>
    </div>
    <uni-drawer ref="showRight" mode="right" :mask-click="false" :width="300">
      <draw ref="draw" @submit="drawsubmit" @closeDrawer="closeDrawer"></draw>
    </uni-drawer>
  </view>
</template>

<script>
import heardData from "../../component/heard.vue" //组件引入
import draw from "./draw.vue"
export default {
  components: { heardData, draw },
  data() {
    return {
      userInfo: {},
      baseFormData: {},
      visible: false,
      tableData: [],
      dialogtableData: [],
      dataForm: {},
      rules: {
        name: {
          rules: [{
            required: true,
            errorMessage: "请输入客户名称"
          },
          ]
        },
        tel: {
          rules: [{
            required: true,
            errorMessage: "请输入手机号"
          },
          {
            validateFunction: function (rule, value, data, callback) {
              let reg = /^1[3456789]\d{9}$/;
              if (!reg.test(value)) {
                callback("输入有效的手机号");
              }
            }
          }
          ]
        },
        orderNum: {
          rules: [{
            required: true,
            errorMessage: "请输入订单号"
          },
          ]
        },
        confirm: {
          rules: [{
            required: true,
            errorMessage: "请确认商品名称"
          },
          ]
        },
      },
      dialogformData:{},
      ddqd: '', //订单渠道
      loading: false,
      ddqdList: [],
      fkfsData: [],
    }
  },
  created() {
    if (uni.getStorageSync('profile')) {
      this.userInfo = uni.getStorageSync('profile')
    }
    this.search()
    this.getWorkDropdownList()
    this.init()
  },
  methods: {
    goNavData() {
      uni.navigateTo({
        url: '/pages/orcode/index'
      });
    },
    add() {
      this.visible = true
    },
    init() {
      this.$request('mobile/getOrderInfo', 'post', { yhsj: uni.getStorageSync('mobile') }).then(res => {
        if (res.code == 200) {
          this.dialogformData = res.data.order
        }
      })
    },
    submit(ref) {
      this.$refs[ref].validate().then(res => {
        this.$request('mobile/savUdpOrderInfo', 'post', { ...this.dialogformData, yhsj: uni.getStorageSync('mobile') }).then(res => {
          if (res.code == 200) {
            uni.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
            this.visible = false
          }else if (res.code == 500){
             uni.showToast({
              title: res.msg,
              icon: 'error',
              duration: 2000
            })
          }
        })
      }).catch(err => {
        console.log('err', err);
      })
    },
    close() {
      this.dialogformData = {}
      this.visible = false
    },
    addgoods() {
      this.$refs.showRight.open();
      this.productItem = {}
      this.productList = []
    },
    closeDrawer() {
      this.$refs.showRight.close();
    },
    drawsubmit(data) {
      this.productItem = JSON.parse(JSON.stringify(data))
      this.dialogformData.lstTbYOrderproduct.push(this.productItem)
      this.$refs.showRight.close();
    },
    editPro(item) {
      this.productItem = item
      this.$refs.showRight.open();
    },
    delPro(index) {
      this.dialogformData.lstTbYOrderproduct.splice(index, 1)
    },
    search() {
      this.$request('mobile/getMobileOrderList', 'post', { ...this.baseFormData }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
        }
      })
    },
    getWorkDropdownList() {
      this.$request('mobile/getDropdownList', 'post', [{ type: '订单渠道' }]).then(res => {
        if (res.code == 200) {
          if (res.data.length > 0 && res.data[0].value) {
            res.data[0].value.forEach(item => {
              item.value = item.dictCode
              item.text = item.dictValue
            })
            this.ddqdList = res.data[0].value
          }
        }
      })
      this.$request('mobile/getDropdownList', 'post', [{type: '付款方式'}]).then(res => {
					if (res.code == 200) {
						if (res.data.length > 0 && res.data[0].value) {
							res.data[0].value.forEach(item => {
								item.value = item.dictCode
								item.text = item.dictValue
							})
							this.fkfsData = res.data[0].value
						}
					}
				})
    },
    upload() {
      uni.chooseImage({
        count: 1,
        sizeType: 'compressed',
        success: file => {
          console.log(file);
            uni.getFileSystemManager().readFile({
              filePath: file.tempFilePaths[0], //选择图片返回的相对路径
              encoding: 'base64', //编码格式
              success: res => { //成功的回调
                console.log(res, '返回结果');
                this.dialogformData.dddjtpdzbase64 = res.data
              },
              fail: (e) => {
                console.log("图片转换失败");
              }
            })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.download {
  text-align: center;
  position: fixed;
  bottom: 20%;
  left: calc(50% - 100rpx);
  .btn {
    display: inline-flex;
    width: 250rpx;
    height: 100rpx;
    justify-content: center;
    align-items: center;
    border-radius: 30rpx;
    background: rgba(91, 156, 214, 1);
    color: #fff;
  }
}
.content {
  padding: 20rpx;
  margin-top: 20rpx;
  .uni-forms-item {
    margin-bottom: 15px !important;
  }
  .button-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      width: 48%;
      text-align: center;
      &:first-child {
        background: #01a0fe;
      }
    }
  }
}
.table,
.dialogtable {
  margin: 20rpx 0;
  .uni-table {
    width: 100% !important;
    min-width: auto !important;
    .uni-table-th {
      width: 20% !important;
      font-size: 28rpx !important;
    }
    .uni-table-td {
      word-break: break-all;
    }
  }
}
.goods-table {
  margin-bottom: 30rpx;
  .heard {
    background: #fff;
    text {
      display: inline-block;
      width: calc(25% - 6px);
      font-weight: 500;
      font-size: 26rpx;
      text-align: center;
      color: #909399;
      border: 1px solid #ebeef5;
      padding: 20rpx 5rpx;
      &:last-child {
        border-right: none;
      }
    }
  }
  .table-content {
    background: #fff;
    display: flex;
    view {
      display: inline-flex;
      width: calc(25% - 6px);
      font-weight: 500;
      font-size: 26rpx;
      flex: 1;
      color: #909399;
      border: 1px solid #ebeef5;
      padding: 20rpx 5rpx;
      text-align: center;
      justify-content: center;
      align-items: center;
      &:last-child {
        border-right: none;
      }
    }
  }
}
.primary-btn {
  display: inline-flex;
  width: 100rpx;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.error-btn {
  display: inline-flex;
  width: 100rpx;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.dialog {
  position: relative;
  background: #f5f5f5;
  height: calc(100vh - 150rpx);
  overflow-x: hidden;
  top: 0;
  left: 0;
  z-index: 9;
  .dialogform {
    margin-top: 100rpx;
    height: 90%;
    .btns {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      padding: 30rpx;
      justify-content: space-between;
      align-items: center;
      width: calc(100vw - 60rpx);
      button {
        margin: 0;
        &:first-child {
          background: #01a0fe;
        }
      }
    }
    .btns2 {
      margin: 30rpx 0 20rpx;
      button {
        width: 100%;
        text-align: center;
        background: #01a0fe;
      }
    }
    .uni-forms {
      height: 90%;
      overflow-x: hidden;
      padding: 30rpx;
      width: calc(100vw - 60rpx);
    }
    .uni-forms-item {
      margin-bottom: 15px !important;
      .uni-icons {
        font-size: 40rpx !important;
      }
      .uni-forms-item__label {
        font-size: 12px;
      }
    }
  }
}

.certificate{
  position:relative;
  button{
    position: absolute;
    right: 10rpx;
    top: 16rpx;
    background: #01a0fe;
    color: #fff;
    font-size: 28rpx;
    z-index: 20;
  }
  .preview image {
  width: 300rpx;
  height: 300rpx;
}
}
</style>